import { FC } from 'react';
import { ComponentProps as QuestionInputProps } from './questionInput';
import { ComponentProps as QuestionParagraphProps } from './questionParagraph';
import { ComponentProps as QuestionTitleProps } from './questionTitle';
import { ComponentProps as QuestionInfoProps } from './questionInfo';
import { ComponentProps as QuestionTextAreaProps } from './questionTextArea';
import { ComponentProps as QuestionRadioProps } from './questionRadio';
import { ComponentProps as QuestionCheckBoxProps } from './questionCheckBox';

// 为什么用 '&'
// 如果使用 '|'
// type ComponentPropsType = QuestionInputProps | QuestionTitleProps;
//
// const config: ComponentConfig = {
//   title: 'input',
//   type: 'input',
//   Component: QuestionInput, // --> 使用 '|', 这里ts会报错
//   defaultProps,
// };
export type ComponentPropsType = QuestionInputProps &
  QuestionTitleProps &
  QuestionParagraphProps &
  QuestionInfoProps &
  QuestionTextAreaProps &
  QuestionRadioProps &
  QuestionCheckBoxProps;

export type EditorComponentType =
  | 'input'
  | 'title'
  | 'paragraph'
  | 'info'
  | 'textarea'
  | 'checkbox'
  | 'radio';

export type EditorState = {
  selectedId: string;
  componentList: ComponentInfo[];
  copiedComponentInfo?: ComponentInfo;
};

export type ComponentInfo = {
  fe_id?: string;
  type?: EditorComponentType;
  title?: string;
  props?: ComponentPropsType;
  isHidden?: boolean;
  isLocked?: boolean;
};

export type ComponentConfig = {
  title: string;
  type: EditorComponentType;
  Component: FC<ComponentPropsType>;
  Form: FC<ComponentPropsType>;
  defaultProps: ComponentPropsType;
};
